<template>
  <div class="container">
    <div style="padding: 0px 20px">
      <VolHeader
        icon="md-apps"
        text="控烟调查统计表"
        style="margin-bottom: 10px; border: 0px; margin-top: 15px"
      >
        <div slot="content"></div>
        <slot>
          <div style="text-align: right">
            <Select clearable v-model="searchdata" :placeholder="'请选择'+searchOptions.title" style="width: 130px;">
              <Option v-for="(kv,kvIndex) in searchOptions.data" :key="kvIndex" :value="kv.key||''">{{kv.value}}</Option>
            </Select>
            <Button type="info" ghost @click="load" style="margin-left: 20px">查询</Button>
            <Button type="info" ghost @click="exp">导出</Button>
          </div>
        </slot>
      </VolHeader>
      <vol-table
        ref="table"
        :ch="false"
        :loadKey="true"
        :columns="columns"
        :pagination-hide="true"
        :height="{heigth}"
        :url="url"
        :index="true"
      ></vol-table>
    </div>
  </div>
</template>
<script>
import VolTable from '@/components/basic/VolTable.vue'
import VolHeader from '@/components/basic/VolHeader.vue'
export default {
  components: { VolTable, VolHeader },
  created () {},
  data () {
    return {
      searchOptions: {
        title: '机构类型',
        data: [{'key': 1, 'value': '党政机关'}, {'key': 2, 'value': '医疗卫生机构'}]
      },
      searchdata: 0,
      url: 'api/Questionnaires/GetTable2Data', // 后从加载数据的url
      columns: [
        { field: 'id', title: '主键ID', type: 'int', isKey: true, hidden: true, align: 'left' },
        { field: 'typeid', title: '机构类型', width: 120, sort: true },
        { field: 'groupid', title: '分组', sort: true, width: 120 },
        { field: 'unitid', title: '机构名称', sort: true, bind: { key: 'enable', data: [] }, width: 120 },
        { field: 'answerscontent.total', title: '调查分值', sort: true, width: 120 },
        { field: 'questuser', title: '调查人', sort: true, width: 120 },
        { field: 'updatedAt', title: '调查时间', sort: true, width: 150 }
      ]
    }
  },
  mounted: function () {
    this.$nextTick(function () {
      // 调用需要执行的方法
      this.load()
    })
  },
  methods: {
    load () {
      let where = {wheres: [{name: 'Type', value: this.searchdata, displayType: 'equal'}]}
      this.$refs.table.load(where)
    },
    exp () {
      let rows = this.$refs.table.getSelected()
      if (rows.length === 0) {
        return this.$message.error('请先选中行')
      }
      // this.$refs.table.delRow()
    },
    getRows () {
      let rows = this.$refs.table.getSelected()
      if (rows.length === 0) {
        return this.$message.error('请先选中行1')
      }
      let text = '当前选中的行数据：' + JSON.stringify(rows)

      this.$Message.info(text)
    }
  }
}
</script>
